import React, { Component, Fragment } from 'react'
import TodoListHeader from './TodoListHeader'
import TodoListInput from './TodoListInput'
import TodoList from './TodoList'

export default class TodoListApp extends Component {

  state = {
    todos: Array(5).fill(null).map((u,v) => ({
      id: Math.random(),
      title: '陈症结' + v,
      isok: false
    }))
  }
  //添加新待办事项
  AddtoItem = (title) => {
    this.setState({
      todos: [
        {
          id: Math.random(),
          title,
          isok: false
        },
        ...this.state.todos
      ]
    })
  }
  //切换完成状态
  QHisok = (id) => {
    this.setState({
      todos: this.state.todos.map(todo => {
        if(todo.id === id) {
          todo.isok = !todo.isok
        }
        return todo
      })
    })
  }
  //删除一条待办事项
  DeletItem = (id) => {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id!==id)
    })
  }
  //一键删除所有待办事项
  deleteAll = () => {
    this.setState({
      todos: []
    })
  }
  //删除选中的待办事项
  // XzDelet = () => {
  //   this.setState({
  //     todos: this.Xzdelete()
  //   })
  // }
  // Xzdelete = (ids) => {
  //   console.log(this.state.todos.filter(todo => todo.id!==ids))
  // }
  render() {
    return (
      <Fragment>
        <TodoListHeader />
        <TodoListInput deletxz={this.XzDelet} AddInput={this.AddtoItem} AllDelet={this.deleteAll} />
        <TodoList deletexz={this.Xzdelete} todos={this.state.todos} Qiehuanisok={this.QHisok} deletItem={this.DeletItem}/>
      </Fragment>
    )
  }
}
